<template>
    <el-form 
        ref="myform" 
        :model="form" 
        label-width="80px"
        status-icon 
        class="myform"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username" >
          <el-input 
          prefix-icon="el-icon-user" 
          v-model="form.username"
          placeholder="请输入用户名"
          autocomplete="off"
          type="text"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone" >
          <el-input 
          prefix-icon="el-icon-phone-outline" 
          v-model="form.phone"
          placeholder="请输入手机号"
          autocomplete="off"
          type="text"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" >
          <el-input 
          prefix-icon="el-icon-message" 
          v-model="form.email"
          placeholder="请输入邮箱"
          autocomplete="off"
          type="text"
        ></el-input>
      </el-form-item>
       <el-form-item label="密码" prop="password" >
        <el-input 
        prefix-icon="el-icon-lock" 
        v-model="form.password"
        type="password"
         placeholder="请输入密码"
         autocomplete="off"
         show-password
         @blur="checkpasscommon"
      ></el-input>
      </el-form-item>
       <el-form-item label="确认密码" prop="dbpassword" >
        <el-input 
        prefix-icon="el-icon-lock" 
        v-model="form.dbpassword"
        type="password"
         placeholder="请输入确认密码"
         autocomplete="off"
         show-password
      ></el-input>
      </el-form-item>
       <el-form-item>
        <el-button type="success" block  @click="todoRegister"  :loading="loading">注册</el-button>
        <el-button type="danger" block @click="resetData" >重置</el-button>
      </el-form-item>
    </el-form>
</template>

<script>
import {reactive,toRefs,ref} from "vue"
import { reg } from '../../utils/validate';
import { toast } from '../../utils';
import { ajax } from '../../service';
import {useStore} from "vuex";


export default {
  name:"registercom",
  setup(props,context){   // context 隔空传递 
    const myform = ref()
    const store = useStore()
    console.log(store);
    const state = reactive({
      loading:false,
      form:{},
      rules:{
        username:[
          { required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        phone:[
           { required: true, message: '请输入手机号', trigger: 'blur'},
           { pattern: reg.phone ,message: '请输入有效的手机号', trigger: 'blur' }
        ],
        email:[
           { required: true, message: '请输入邮箱', trigger: 'blur'},
           { pattern: reg.email ,message: '请输入正确的邮箱', trigger: 'blur' }
        ],
        password:[
          { required: true, message: '请输入密码', trigger: 'blur'},
          {
            validator:function(rule, value, callback){
              if(reg.pwd.test(value)){
                  callback()
              }else{
                callback(new Error('请输入6-16数字和字母组合'));
              }
            }
          }
        ],
        dbpassword:[
          { required: true, message: '请输入确认密码', trigger: 'blur'},
          {
            validator:function(rule, value, callback){
              if(reg.pwd.test(value)){
                if(value==state.form.password){
                  callback()
                }else{
                  callback(new Error('2次密码不一致'));
                }
              }else{
                callback(new Error('请输入6-16数字和字母组合'));
              }
            }
          }
        ]

      }
    })
    const resetData = ()=>{
      myform.value.resetFields();
    }
    const checkpasscommon = ()=>{
      if(state.form.dbpassword){   // 确认密码有值 才会去比较是否一致 
          myform.value.validateField("dbpassword")
      }
    }
    const todoRegister =  ()=>{
      // 表单校验
        myform.value.validate(async valid=>{
          console.log(valid)
          if(valid){
            // 
           const {code,result} = await ajax.register(state.form);
           if(code==200){
            //  自定义去子改父 
            // vuex 
            // 自定义事件  
            context.emit("changeactive",{
              active:"login",
              phone:state.form.phone
            });
            // store.commit('changemphone',state.form.phone)
           }
            
          }else{
              toast.showError("请输入有效注册信息")
          }
        })
    }
    return {
      ...toRefs(state),
      myform,
      checkpasscommon,
      resetData,
      todoRegister
    }
  }
}
</script>
